/**
 * AnimationForm module
 */

var React = require("react");
var tool = require("../../../utils/tool");
var LoopProperty = require("./LoopProperty");
var consts = require("../../../consts/consts");
var storage = require("../../../utils/storage");
var CommonProperty = require("./CommonProperty");
var Upload = require("../../../utils/upload/Upload");
var dataProvider = require("../../provider/dataProvider");
var pathProvider = require("../../provider/pathProvider");
var Validator = require("../../../utils/validator/Validator");
// var timelineSaveProvider = require("../../provider/timelineSaveProvider");
var AnimationForm = React.createClass({
    mixins: [CommonProperty],
    getInitialState: function () {
        return {
            editMode: "",
            uploading: false,
            upload: {
                html: null,
                title: null,
                percent: null
            },
            form: {
                model: {
                    md5: null,
                    url: null,
                    html: null,
                    label: null
                }
            },
            updateAllTimeline: false,
            overStart_time: false,
            lessStart_time: false,
            overDuration: false
        }
    },
    getInitialProps: function () {
        return {
            form: {},
            root: {},
            widget: {},
            parent: {},
            selectedTimeline: {}
        }
    },
    componentWillMount: function () {
        var editMode = editMode;
        if (editMode) {
            this.setState({
                editMode: editMode
            });
        }
        this.form = {};
        this.restore = {};
        this.isFirstEditPath = true;
        this.min = 0;
        this.max = 50;
        this.duration = 10;

        this.selectedWidgetId;
        if (storage.data.selectedWidgetId) {
            this.selectedWidgetId = storage.data.selectedWidgetId;
        }
    },
    componentWillUpdate: function () {
        if (storage.data.selectedWidgetId) {
            this.selectedWidgetId = storage.data.selectedWidgetId;
        }
    },
    checkInputVaild: function (type, value, needAlert) {
        var validators = [];
        var validator = Validator();

        // 透明度加入合法性校验
        var opacityTypes = ["opacity"];
        if ($.inArray(type, opacityTypes) != -1) {
            validators.push({validator: "opacity"});
        }
        validators.push({validator: type});

        validator.addRule(value, validators);

        var errors = validator.execute();
        errors && needAlert && (alert(errors));

        return !errors;
    },
    handleOnRemoveTimeline: function () {
        const {selectedTimeline, removeTimeline, setState, editMode}=this.props;

        if (editMode == consts.EDIT_MODE.PATH) this.handleOnQuitEditPath();

        // dataProvider.removeTimeline(storage.data.selectedWidgetId, timeline, function () {
        //     dataProvider.queryTimelinesByWidgetId(widget.id, function () {
        //         root.updateSelectedTimeline();
        //         root.updateTimelines(dataProvider.timelines);
        //     });
        // }, function () {
        // }, root);

        removeTimeline(selectedTimeline);
        setState({selectedTimeline: null, selectedTimelineId: ''})
    },
    filterInputValue: function (timeline, type, val, element) {
        var value = val, flag = true;

        // 数值不能为负数的输入类型
        var nonMinusTypes = ["duration", "repeat_count"];
        // 剔除负号
        if ($.inArray(type, nonMinusTypes) != -1) {
            if (value.indexOf("-") != -1) {
                flag = false;
                value = value.replace(/[-]/g, "");
            }
        }

        // 数值不能超过10的输入类型
        var maxTenTypes = ["duration"];
        if ($.inArray(type, maxTenTypes) != -1) {
            if (value > 10) {
                flag = false;
            }
        }
        //数值为整数的输入类型
        var numberTypes = ["repeat_count"];
        if (value && $.inArray(type, numberTypes) !== -1) {
            value = parseInt(val) || 1;
            value = value > 100 ? 100 : value;
        }

        //开始时间处理
        var startTypes = ["start_time"];
        if ($.inArray(type, startTypes) != -1) {
            var max = this.max;
            var min = this.min;
            var lessStart_time = false,
                overStart_time = false;
            value = value * 1;
            value = isNaN(value) ? 0 : value;
            if (value < min) {
                value = min;
                lessStart_time = true;
            }
            if (value > max) {
                value = max;
                overStart_time = true;
            }
            this.setState({
                overStart_time: overStart_time,
                lessStart_time: lessStart_time
            })
        }
        if (!flag) {
            // 还原数值
            value = timeline[type] || 0;
            alert($._('error number try again'));
        }

        return value;
    },
    doPropertyChange: function (timeline, type, val, element) {
        const {updateTimeline, setState}=this.props;
        const timeline_id = timeline.id;
        // 对输入数据进行处理
        var val = this.filterInputValue(timeline, type, val, element);
        var newAttr = {};
        newAttr[type] = val;

        //选择手动输入循环次数时，循环次数默认等于1;
        if (type == 'repeat_count_type' && val == 1) {
            var repeat_count = {
                repeat_count: 1
            };
            $.extend(newAttr, repeat_count);
        }
        if (!(type in timeline)) {
            var inAttr = {
                an_types: [newAttr]
            };
            newAttr = inAttr;
        }

        timeline = $.extend(true, {}, timeline, newAttr);
        timeline.id = timeline_id;

        this.recalcEndTime(timeline);

        this.restoreAttr();

        //处理timeline 小数位数
        timeline.end_time = parseFloat(timeline.end_time.toFixed(1));
        timeline.duration = parseFloat(timeline.duration.toFixed(1));
        if (type == 'start_time') {
            var timelines = this.props.timelines;
            for (var item in timelines) {
                if (timelines[item].id == timeline.id && item < timelines.length - 1) {
                    item = parseInt(item);
                    if (timeline.end_time > timelines[item + 1].start_time) {
                        timeline.end_time = timelines[item + 1].start_time;
                        timeline.duration = timeline.end_time - timeline.start_time
                    }
                }
            }
        }
        // 修改持续时间更新所有timelines数据
        if (type == 'duration') {
            var timelines = this.props.timelines;
            if (timelines.length > 1) {
                for (var i in timelines) {
                    if (timelines[i].id == timeline.id) {
                        timelines[i] = timeline;
                        i = parseInt(i);
                        if (i < timelines.length - 1 && timelines[i + 1].start_time < timeline.end_time) {
                            for (var j = i + 1; j < timelines.length; j++) {
                                timelines[j].start_time = timelines[j - 1].end_time;
                                timelines[j].end_time = timelines[j].start_time + timelines[j].duration;
                            }
                            this.setState({
                                overDuration: true
                            })
                        }
                    }
                }
                this.setState({updateAllTimeline: true});
            }
        }
        updateTimeline(timeline);
        setState({selectedTimeline: timeline})
        // timelineSaveProvider.update(timeline);
        // var animation = this.props.parent;
        // animation.updateTimeline(timeline);
        return timeline;
    },
    handleOnPropertyChange: function (type, group) {
        const {updateTimeline, setState}=this.props;
        let timeline = this.props.selectedTimeline;
        // var timeline_id = timeline.id;
		//
        // var animation = this.props.parent;
        const eventObj = tool.getEventObjByArray([].slice.call(arguments));
        let element = $(eventObj.target);
        var val = element.val();

        // 开始时间对输入的校验放到blur时做
        var specialTypes = ["start_time"];
        if ($.inArray(type, specialTypes) == -1) {
            // 对透明度属性单独处理
            if (typeof group === "string") {
                if (this.checkInputVaild(group, val)) {
                    this.doPropertyChange(timeline, type, val, element);
                }
            } else {
                this.doPropertyChange(timeline, type, val, element);
            }
        } else {
            var root = this.props.root;
            var newAttr = {};
            newAttr[type] = val;

            timeline = $.extend({}, timeline, newAttr);
            updateTimeline(timeline);
            setState({selectedTimeline: timeline})
        }
    },
    handleOnInputBlur: function (type, e) {
        const {updateTimeline, setState, updateTimelines}=this.props;
        let timeline = this.props.selectedTimeline;
        const specialTypes = ["start_time"];

        var element = $(e.target);
        if ($.inArray(type, specialTypes) != -1) {
            var val = element.val();
            timeline = this.doPropertyChange(timeline, type, val, element);
        }

        // var root = this.props.root;
        // var animation = this.props.parent;
        if (this.state.updateAllTimeline) {
            // put all timelines
            // this.updateAllTimelines(this.props.timelines);
            updateTimelines(this.props.timelines)
        } else {
            // this.updateAnimation(timeline, function () {
            //     root.updateSelectedTimeline(timeline);
            //     animation.updateTimeline(timeline);
            // }, function () {
            //
            // });
            updateTimeline(timeline)
        }
    },
    // 编辑路径点
    handleOnEditPath: function () {
        var form = this.props.form;
        var root = this.props.root;
        var anType = form.model.an_types.length ? form.model.an_types[0] : null;
        var points = anType.points || [];
        var len = points.length;

//        root.closePreview();//关闭预览

        if (len > 0 && points[0].x != 0) {
            var point_x = points[0].x;
            var point_y = points[0].y;
            for (var i = 0; i < len; i++) {
                points[i].x = points[i].x - point_x;
                points[i].y = points[i].y - point_y;
            }
        }

        if (len > 2 && this.isFirstEditPath) {
            //移出第二个点
            points.splice(1, 1);
            this.isFirstEditPath = false;
        }
        const {parent,setState,widget} = this.props;
        setState({
            editMode: consts.EDIT_MODE.PATH
        });
        parent.onEditModeChange(consts.EDIT_MODE.PATH, points, widget);
        return false;
    },
    handleOnQuitEditPath: function () {
        const {parent} = this.props;
        parent.onEditModeChange(consts.EDIT_MODE.PAGE);
    },
    handleOnPreviewTimeline: function () {
        console.log('预览')

        // const {setState, selectedTimeline, status,editMode}=this.props;
		//
        // const statusNew = $.extend({}, status, {
        //     switchType: consts.SWITCH_TYPE.PLANE_AR
        // });
        // $(".editor_hidden").css({"opacity": 0});
        // setState({
        //     preview: {
        //         showPreview: true,
        //         singleWidget: true,
        //         singleTimeline: selectedTimeline
        //     },
        //     status: statusNew
        // })
        // if (editMode == consts.EDIT_MODE.PATH) {
        //     // this.updatePathPoint();
        //     // this.handleOnQuitEditPath();
        // }
    },
    // 重新计算结束时间
    recalcEndTime: function (timeline) {
        if (timeline.start_time != undefined && timeline.duration != undefined) {
            timeline.start_time = parseFloat(timeline.start_time);
            timeline.duration = parseFloat(timeline.duration);
            timeline.end_time = parseFloat((timeline.start_time + timeline.duration).toFixed(1));
        }
    },
    updateUploadAnimation: function (params) {
        var root = this.props.root;
        var timeline = this.props.selectedTimeline;
        var animation = this.props.parent;
        timeline = $.extend(true, {}, timeline, params);
        const {updateTimelines, setState}=this.props;

        // this.updateAnimation(timeline, function () {
        //     root.updateSelectedTimeline(timeline);
        //     animation.updateTimeline(timeline);
        // }, function () {
        //
        // });
    },
    updateAnimation: function (timeline, callbackFn, callbackFnErr) {
        var widget_id = this.selectedWidgetId || timeline.widget_id;
        dataProvider.updateTimelineAnimation(widget_id, timeline, callbackFn, callbackFnErr);
    },
    updateAllTimelines: function (timelines, callbackFn, callbackFnErr) {
        const {updateTimelines, setState}=this.props;
        updateTimelines(storage.data.selectedWidgetId, timelines, callbackFn, callbackFnErr);
    },
    restoreAttr: function () {
        this.form = {};
        this.form.model = storage.data.selectedTimeline || this.props.selectedTimeline;
        this.restore = $.extend({}, this.form.model);
        this.anType = this.form.model.an_types[0];
        this.an_type = this.anType.an_type;
    },
    updateUploaded: function (uploaded) {
        this.setState({fileUploaded: uploaded});
    },
    checkTimeline: function () {
        var timelines = this.props.timelines;
        var timeline = this.props.selectedTimeline;

        for (var i in timelines) {
            if (timeline.id == timelines[i].id) {
                i = parseInt(i);
                if (i > 0) {
                    this.min = timelines[i - 1].end_time;
                    if (i < timelines.length - 1) {
                        this.max = timelines[i + 1].start_time - .1;
                    } else {
                        this.max = 50
                    }
                } else if (i == 0 && timelines.length > 1) {
                    this.min = 0;
                    this.max = timelines[i + 1].start_time - .1;
                }
            }
        }
    },
    updatePathPoint: function () {
        var form = this.props.form;
        var an_types = form.model.an_types || [];
        for (var i = 0; i < an_types.length; i++) {
            var an_type = an_types[i];
            if ($.inArray(an_type.an_type, consts.WIDGET_HAS_PATH_ANIMATION_TYPE) != -1) {
                if (pathProvider.changed) {
                    an_type.points = pathProvider.getPoints();
                    pathProvider.changed = false;
                }
            }
        }
    },
    render: function () {
        const {handleOnToggleShowTimeline,editMode}=this.props;
        var form = this.props.form, timelines = this.props.timelines, stateForm = this.state.form;
        var root = this.props.root;
        if (stateForm.html) {
            form = $.extend(true, {}, form, stateForm);
        }
        form.model.if_music = form.model.if_music || 0;
        form.model.tween = form.model.tween;
        form.model.start_time = form.model.start_time || 0;
        form.model.end_time = form.model.end_time || 1;
        form.model.an_types = form.model.an_types || [];
        this.checkTimeline();
        var anType = form.model.an_types.length ? form.model.an_types[0] : null;
        if (anType) {
            anType.auto_rotate = anType.auto_rotate || false;
            anType.loop_type = anType.loop_type || 0;
            anType.direction = anType.direction || 0;
            anType.repeat_count_type = anType.repeat_count_type || 0;
            var start_value = anType.start_value || 0,
                end_value = anType.end_value || 0;
        }
        var duration = typeof form.model.duration === "undefined" ? 1 : form.model.duration;

        var uploadOpts = {
            maxFiles: 99,
            acceptedFiles: "audio/wav,audio/aiff,audio/mid",
            size: 10 * 1024 * 1024,
            imgType: 'customAudio',
        };
        var musicInnerNode = "";
        if (form.model.an_types.length) {
            var customMusicInnerNode = "";
            if (form.model.if_music == 2) {
                var htmlInnerNode = "";
                var replaceInnerNode = "";
                if (form.model.html) {
                    htmlInnerNode = <i className="icon-addfolder">{form.model.html}</i>
                    replaceInnerNode =
                        <span className="replace_audio">
                            {$._("Replace")}
                            <span>{form.model.label}</span>
                        </span>
                } else {
                    htmlInnerNode = <i className="icon-addfolder">{$._('click to upload audio')}</i>
                }

                var uploadedInnerNode = "";
                if (!this.state.uploading) {
                    uploadedInnerNode =
                        <div className="default-status">
                            <input disabled type="text" autofocus className="form-control" value={form.model.html}/>
                           <span className="input-group-btn">
                               <button onClick={this.handleOnStartUpload} className="btn btn-default" type="button">
                                   {htmlInnerNode}
                                   {replaceInnerNode}
                               </button>
                           </span>
                        </div>
                }

                var uploadingInnerNode = "";
                if (this.state.uploading) {
                    uploadingInnerNode =
                        <div className="uploading-status">
                            <div className="progress-label">
                                <span>{this.state.upload.title}</span>
                                <span>{this.state.upload.percent}</span>
                            </div>
                            <div className="progress">
                                <div className="progress-bar" style={{width:this.state.upload.percent}}></div>
                            </div>
                            <span className="btn-close" onClick={this.handleOnCancelUpload}>
                                <i className="icon-close"></i>
                            </span>
                        </div>
                }
                customMusicInnerNode =
                    <form name="form.name" id='animationAudio' ref="dialog" className='animationAudio'>
                        <Upload ref="upload" prefix='animationAudio' options={uploadOpts}
                                type={consts.WIDGET_TYPE.MUSIC} root={root} dialog={this} tips={form.model.html}/>
                        <div className="music_tip">
                            <div>{$._("wav aiff mid and time less than 30s")}</div>
                        </div>
                        <input type="hidden" defaultValue={form.model.url}/>
                    </form>
            }

            musicInnerNode =
                <div className="animation-music animation-group rowlist">
                    <label className="label-for-title">{$._("Audio")}</label>
                    <label className="select-label-help">
                        <select name="if_music" onChange={this.handleOnPropertyChange.bind(this, "if_music")}
                                onBlur={this.handleOnInputBlur.bind(this, "if_music")}
                                className="select-direction form-control" value={form.model.if_music}>
                            <option value="0">{$._('No audio')}</option>
                            <option value="1">{$._("System default")}</option>
                            <option value="2">{$._('Custom')}</option>
                        </select>
                    </label>
                    {customMusicInnerNode}
                </div>
        }

        var tweenInnerNode = "";
        if (form.model.an_types.length > 0 &&
            anType.an_type != consts.AN_TYPE.BOUNCE) {
            tweenInnerNode =
                <div className="animation-tween animation-group rowlist">
                    <label className="label-for-title">{$._("Speed")}</label>
                    <label className="select-label-help">
                        <select name="tween" onChange={this.handleOnPropertyChange.bind(this, "tween")}
                                onBlur={this.handleOnInputBlur.bind(this, "tween")}
                                className="select-tween form-control" value={form.model.tween}>
                            <option value="0">{$._("Average speed")}</option>
                            <option value="1">{$._("Fast to slow")}</option>
                            <option value="2">{$._("Slow to fast")}</option>
                        </select>
                    </label>
                </div>
        }

        var timelineInnerNode = "";
        if (form.model.an_types.length > 0) {
            var startTimeErrorNode = "";
            if (form.model.start_time == undefined) {
                //startTimeErrorNode = <span style={{color:'#777620'}}>输入:0-60,1位小数</span>
            }
            if (this.state.overStart_time) {
                startTimeErrorNode =
                    <div style={{color:'#FF0000'}}>{$._("Start time can not be more than subsequent time")}</div>
            }
            var durationErrorNode = "";
            if (form.model.duration == undefined) {
                //durationErrorNode = <span style={{color:'#777620'}}>输入:0.1-10,1位小数</span>
            }
            if (this.state.overDuration) {
                durationErrorNode =
                    <div style={{color:'#ff0000',clear:'both'}}>{$._('Animation start time will be postponed')}</div>
            }
            timelineInnerNode =
                <div className="animation-timeline animation-group">
                    <div className="rowlist">
                        <label className="label-for-title animation-label-start">{$._("Start")}</label>
                        <input name="start_time" onChange={this.handleOnPropertyChange.bind(this, "start_time")}
                               onBlur={this.handleOnInputBlur.bind(this, "start_time")}
                               className="animation-input-start form-control" type="text"
                               value={form.model.start_time}/>
                        <br/>
                        {startTimeErrorNode}
                    </div>
                    <div className="rowlist">
                        <label className="animation-label-end pull-left">{$._("Continued")}</label>
                        <input name="duration" onChange={this.handleOnPropertyChange.bind(this, "duration")}
                               onBlur={this.handleOnInputBlur.bind(this, "duration")} type="range" min="0.1"
                               max={this.duration} step="0.1" value={duration} className="pull-left form-control"/>
                        <input name="duration" onChange={this.handleOnPropertyChange.bind(this, "duration")}
                               onBlur={this.handleOnInputBlur.bind(this, "duration")}
                               className="animation-input-end form-control" type="number" value={duration} step="0.1"
                               min="0.1" max={this.duration} style={{float:'right',marginRight:'20px'}}/>
                        {durationErrorNode}
                    </div>
                </div>
        }

        var pathInnerNode = "";
        if (anType) {
            var pathNode = "";
            if ($.inArray(anType.an_type, consts.WIDGET_HAS_PATH_ANIMATION_TYPE) != -1) {
                var editPathNode = "";
                if (editMode != 'PATH') {
                    editPathNode =
                        <button onClick={this.handleOnEditPath} className="updatelujing" type="button"
                                disabled={editMode == 'PATH'}><span className='button-item'><span
                            className='text-grad'>{$._("Edit Path")}</span></span></button>
                }

                var quitEditNode = "";
                if (editMode == 'PATH') {
                    quitEditNode =
                        <button onClick={this.handleOnQuitEditPath} className="editlujing" type="button"
                                disabled={editMode != 'PATH'}><span className='button-item'><span
                            className='text-grad'>{$._("Edit path exit")}</span></span></button>
                }

                pathNode =
                    <div className="property-item">
                        <div className="property-inline-item">
                            <div className="input-group pathButton">
                                <label>{$._("Path")}</label>
                                {editPathNode}
                                {quitEditNode}
                            </div>
                        </div>
                    </div>
            }

            pathInnerNode =
                <div>
                    {pathNode}
                </div>
        }

        var anTypeInnerNode = "";
        if (anType) {
            var anTypePropertyNode = "";
            switch (parseInt(anType.an_type)) {
                case consts.AN_TYPE.ERASE:
                case consts.AN_TYPE.FLY_INTO:
                case consts.AN_TYPE.CUT:
                case consts.AN_TYPE.BOUNCE:
                case consts.AN_TYPE.ROTATE_FLY_INTO:
                case consts.AN_TYPE.LIGHT_ERASE:
                    anTypePropertyNode =
                        <div className="property-item">
                            <label className="label-for-title">{$._('Direction')}</label>
                            <label className="select-label-help">
                                <select name="direction" onChange={this.handleOnPropertyChange.bind(this, "direction")}
                                        onBlur={this.handleOnInputBlur.bind(this, "direction")}
                                        className="select-direction form-control" value={anType.direction}>
                                    <option value="0">{$._('Top to bottom')}</option>
                                    <option value="1">{$._('Bottom to top')}</option>
                                    <option value="2">{$._('Left to right')}</option>
                                    <option value="3">{$._('Right to left')}</option>
                                </select>
                            </label>
                        </div>
                    break;
                case consts.AN_TYPE.FLICKER:
                    anTypePropertyNode =
                        <div className="property-item flicker-item">
                            <label className="label-for-title">{$._("Opacity")}</label>
                            <div className="input-group start-value-group">
                                <input name="start_value"
                                       onChange={this.handleOnPropertyChange.bind(this, "start_value", "opacity")}
                                       onBlur={this.handleOnInputBlur.bind(this, "start_value", "opacity")}
                                       className="form-control" type="number" value={start_value} min='0' step='0.1'
                                       max='1' placeholder="0~1"/>
                            </div>
                            <div className="startend">-</div>
                            <div className="input-group end-value-group">
                                <input name="end_value"
                                       onChange={this.handleOnPropertyChange.bind(this, "end_value", "opacity")}
                                       onBlur={this.handleOnInputBlur.bind(this, "end_value", "opacity")}
                                       className="form-control" type="number" value={end_value} min='0' step='0.1'
                                       max='1' placeholder="0~1"/>
                            </div>
                            <LoopProperty anType={anType} parent={this}/>
                        </div>
                    break;
                case consts.AN_TYPE.ZOOM:
                    anTypePropertyNode =
                        <div className="property-item">
                            <label className="label-for-title">{$._("Ratio")}</label>
                            <div className="input-group start-value-group">
                                <input name="start_value"
                                       onChange={this.handleOnPropertyChange.bind(this, "start_value")}
                                       onBlur={this.handleOnInputBlur.bind(this, "start_value")}
                                       className="form-control scale_input" type="number" value={start_value} min="0"
                                       placeholder="0~无穷大"/>
                            </div>
                            <div className="startend">-</div>
                            <div className="input-group end-value-group">
                                <input name="end_value" onChange={this.handleOnPropertyChange.bind(this, "end_value")}
                                       onBlur={this.handleOnInputBlur.bind(this, "end_value")}
                                       className="form-control scale_input" type="number" value={end_value} min="0"
                                       placeholder="0~无穷大"/>
                            </div>
                            <LoopProperty anType={anType} parent={this}/>
                        </div>
                    break;
                case consts.AN_TYPE.ROTATE:
                    anTypePropertyNode =
                        <div className="property-item">
                            <label className="label-for-title">{$._("Angle")}</label>
                            <div className="input-group start-value-group">
                                <input name="start_value"
                                       onChange={this.handleOnPropertyChange.bind(this, "start_value")}
                                       onBlur={this.handleOnInputBlur.bind(this, "start_value")}
                                       className="form-control angle_input" type="number" value={start_value}
                                       placeholder="-360~360"/>
                            </div>
                            <div className="startend">-</div>
                            <div className="input-group end-value-group">
                                <input name="end_value" onChange={this.handleOnPropertyChange.bind(this, "end_value")}
                                       onBlur={this.handleOnInputBlur.bind(this, "end_value")}
                                       className="form-control angle_input" type="number" value={end_value}
                                       placeholder="-360~360"/>
                            </div>
                            <LoopProperty anType={anType} parent={this}/>
                        </div>
                    break;
                case consts.AN_TYPE.TRUN:
                    anTypePropertyNode =
                        <div className="property-item trun-item">
                            <div className="property-inline-item">
                                <label className="label-for-title">{$._('X axis')}</label>
                                <div className="input-group start-value-group">
                                    <input name="start_rotate_x"
                                           onChange={this.handleOnPropertyChange.bind(this, "start_rotate_x")}
                                           onBlur={this.handleOnInputBlur.bind(this, "start_rotate_x")}
                                           className="small-input form-control" type="number" min="-360" max="360"
                                           value={anType.start_rotate_x} placeholder="0"/>
                                </div>
                                <div className="startend">-</div>
                                <div className="input-group end-value-group">
                                    <input name="end_rotate_x"
                                           onChange={this.handleOnPropertyChange.bind(this, "end_rotate_x")}
                                           onBlur={this.handleOnInputBlur.bind(this, "end_rotate_x")}
                                           className="small-input form-control" type="number" min="-360" max="360"
                                           value={anType.end_rotate_x} placeholder="0"/>
                                </div>
                            </div>
                            <div className="property-inline-item">
                                <label className="label-for-title">{$._('Y axis')}</label>
                                <div className="input-group start-value-group">
                                    <input name="start_rotate_y"
                                           onChange={this.handleOnPropertyChange.bind(this, "start_rotate_y")}
                                           onBlur={this.handleOnInputBlur.bind(this, "start_rotate_y")}
                                           className="small-input form-control" type="number" min="-360" max="360"
                                           value={anType.start_rotate_y} placeholder="0"/>
                                </div>
                                <div className="startend">-</div>
                                <div className="input-group end-value-group">
                                    <input name="end_rotate_y"
                                           onChange={this.handleOnPropertyChange.bind(this, "end_rotate_y")}
                                           onBlur={this.handleOnInputBlur.bind(this, "end_rotate_y")}
                                           className="small-input form-control" type="number" step="1" min="-360"
                                           max="360" value={anType.end_rotate_y} placeholder="0"/>
                                    <br/>
                                </div>
                            </div>
                            <LoopProperty anType={anType} parent={this}/>
                        </div>
                    break;
                case consts.AN_TYPE.PATH:
                case consts.AN_TYPE.ZOOM_MOVE:
                case consts.AN_TYPE.FADE_IN_MOVE:
                case consts.AN_TYPE.ZOOM_ROTATE:
                    anTypePropertyNode =
                        <div className="property-item">
                            <LoopProperty anType={anType} parent={this}/>
                        </div>
                    break;
            }

            anTypeInnerNode =
                <div>
                    {anTypePropertyNode}
                </div>
        }

        return (
            <div>
                {anTypeInnerNode}
                <div className="animation-form">
                    {musicInnerNode}
                    {tweenInnerNode}
                    {timelineInnerNode}
                    {pathInnerNode}
                    <div className="animation-btn-preview prev-btn"
                         style={{display:(form.model.an_types.length > 0 ? "block" : "none")}}>
                        <div type="button" className="yulan" onClick={this.handleOnPreviewTimeline}>
                            <span>{$._("Preview")}</span>
                        </div>
                        <div type="canel" className="shanchu" onClick={this.handleOnRemoveTimeline}>
                            <span>{$._("Delete")}</span>
                        </div>
                    </div>
                    <div className="foo" onClick={handleOnToggleShowTimeline}>
                        <div>
                            <span className="icon-time"></span>
                            <div className='foo-text'>
                                  <span className='button-item'>
                                      <span className='text-grad'>{$._("Dynamic time axis")}</span>
                                  </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
});

module.exports = AnimationForm;
